<template>
    <Modal
            class-name="system-account-bind-role-dialog-wrap"
            :mask-closable="false"
            v-model="visible"
            title="角色列表"
            width="550"
            :styles="{top: '50px'}"
            @on-cancel="close">

        <Table row-key="id" :columns="columns" :data="list" stripe height="350" j-loading="role.queryAll"
               @on-select="handleSelect" @on-select-cancel="handleSelect"/>

        <template slot="footer">
            <Button type="primary" @click="handleSave" :disabled="querying">确定</Button>
        </template>
    </Modal>
</template>

<script>
    import JBoot, {Utils} from "jboot-env";

    const columns = Object.freeze([
	    {type: 'selection', width: 55},
	    {title: '角色名称', key: 'name', tree: true},
	    {title: '角色编码', key: 'code'},
	    {title: '备注信息', render: (h, {row}) => h('span', row.remark || '-')},
    ]);

    export default JBoot.dialogList({
        data() {
            return {
                moduleName: 'role',
                initQuery: false,
                columns
            }
        },

        computed: {
            selectedRoles ({parentParam}){
                return Utils.blank2Default(parentParam.roleList, []).map(item => item.id);
            }
        },

        methods: {
            setResponseData(_responseInfo) {
                this.$set(this, 'list', this.defaultOpenHandler(_responseInfo));

                this.handleSelect(this.parentParam.roleList ?? []);
            },

            defaultOpenHandler (dataSource){
                return Utils.blank2Default(dataSource, []).map(item => {
                    let {id, children} = item;

                    item._checked = this.selectedRoles.includes(id);

                    if(Utils.isNotEmpty(children)){
                        item._showChildren = true;

                        item.children = this.defaultOpenHandler(children);
                    }

                    return item;
                });
            },

            handleSelect (selection){
                this.selection = selection;
            },

            handleSave (){
                this.$emit('save', this.selection);

                this.close();
            }
        }
    });
</script>

<style lang="scss">
    .system-account-bind-role-dialog-wrap {

    }
</style>
